<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Client WebSocket</title>
</head>
<body>

<div>
    <ul>
        <li>
            网页打开是，会调用 onopen 方法，并发送消息给服务端“你好！”；
        </li>
        <li>
            如果服务端关闭，会调用 onclose 方法，页面会出现“聊天会话关闭！”信息。
        </li>
    </ul>
</div>

<div class="chat"></div>

<script>
    var clientWebSocket = new WebSocket("ws://localhost:8080/echo");

    clientWebSocket.onopen = function () {
        console.log("clientWebSocket.onopen", clientWebSocket);
        console.log("clientWebSocket.readyState", "websocketstatus");
        clientWebSocket.send("你好！");
    }

    clientWebSocket.onclose = function (error) {
        console.log("clientWebSocket.onclose", clientWebSocket, error);
        events("聊天会话关闭！");
    }

    function events(responseEvent) {
        document.querySelector(".chat").innerHTML += responseEvent + "<br>";
    }
</script>
</body>
</html>